<template>
  <div class="bigbox">
    <!-- 左侧树盒子 -->
    <div class="leftbox">
      <div class="lefttitle">
        <div class="text">业务组织机构</div>
        <div><el-button @click="dialogVisible=true" class="button" type="primary">新增业务组织机构</el-button></div>
      </div>
      <!-- 类型下拉 -->
      <div class="typeselect">
        <span>组织类型 </span>
        <span>
          <el-select v-model="value" placeholder="请选择" size="small" style="width: 100%;" @change="changetype">
            <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value" class="option"></el-option>
          </el-select>
        </span>
      </div>
      <!-- 搜索框过滤 -->
      <div class="filterbox">
        <el-input v-model="filterinput" placeholder="请输入关键字搜索" size="small" style="width: 100%;"></el-input>
      </div>
      <!-- 树盒子 -->
      <div class="treebox">
        <el-tree
          ref="tree"
          v-if="treeVisible"
          :props="props"
          node-key="id"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          :load="loadNode"
          lazy>
          <template slot-scope="{ node, data }">
            <span>	
              <img v-if="data.bizOrgType=='03'" src="../../../assets/Prepaid/matrix/03.png"/>
              <img v-if="data.bizOrgType=='30'" src="../../../assets/Prepaid/matrix/30.png"/>
              <img v-if="data.bizOrgType=='04'" src="../../../assets/Prepaid/matrix/04.png"/>
              <img v-if="data.bizOrgType=='40'" src="../../../assets/Prepaid/matrix/40.png"/>
                {{ node.label }}
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- 右侧盒子主体 -->
    <div class="rightbox">
       <div class="righttopbox">
         <div class="anniubut" v-show="isshow">
          <el-button @click="dialogVisibles=true" class="button" type="primary"><i class="el-icon-plus"></i> 新增下级组织</el-button>
          <el-button @click="delzuzhi" class="button" type="danger"><i class="el-icon-edit"></i> 删除</el-button>
         </div>
       </div>
       <div class="rightbuttonbox">
         <div class="formdata" v-show="isshow">
           <el-form :model="form" label-width="120px" label-position="right">
             <el-col :span="24">
               <el-form-item label="上级机构">
                 <el-input v-model="form.shangji" size="small" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="行政机构">
                 <el-input v-model="form.bizOrgNo" size="small" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="业务机构名称">
                 <el-input v-model="form.bizOrgName" size="small" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="业务机构类型">
                 <el-input v-model="form.leixing" size="small" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="业务机构类别">
                 <el-input v-model="form.leibie" size="small" ></el-input>
               </el-form-item>
             </el-col>
           </el-form>
         </div>
       </div>
    </div>
    <!-- 新增业务组织弹窗 -->
    <div>
      <el-dialog
        title="新增业务组织"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
          <el-form :model="formtype" :rules="rulestype" label-width="110px" label-position="right" ref="formtype">
            <el-col :span="24">
               <el-form-item label="业务组织类型" prop="bizType">
                <el-select v-model="formtype.bizType" placeholder="请选择业务组织类型" size="small" style="width: 100%">
                  <el-option v-for="(item,index) in options" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="组织机构编码" prop="orgNo">
                <el-select v-model="formtype.orgNo" placeholder="请选择业务组织类型" size="small" style="width: 100%" filterable >
                  <el-option v-for="(item,index) in jigoulist" :key="index" :label="item.orgName" :value="item.orgNo" class="option"></el-option>
                </el-select>
               </el-form-item>
             </el-col>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="elbutton" @click="quxiaozuzhitype">取 消</el-button>
          <el-button class="elbutton" type="primary" @click="submitzuzhitype">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 新增下级组织弹窗 -->
    <div>
      <el-dialog
        title="新增下级组织"
        :visible.sync="dialogVisibles"
        width="30%">
        <div>
          <el-form :model="formxiajitype" :rules="rulesxiajitype" label-width="110px" label-position="right" ref="formxiajiref">
            <el-col :span="24">
               <el-form-item label="上级机构" prop="parentId">
                <el-input v-model="formxiajitype.bizOrgName" size="small"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="行政机构" prop="orgNo">
                <el-select v-model="formxiajitype.orgNo" placeholder="请选择行政机构" size="small" style="width: 100%" filterable @change="$forceUpdate()">
                  <el-option v-for="(item,index) in jigoulist" :key="index" :label="item.orgName" :value="item.orgNo" class="option"></el-option>
                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="业务机构类型" prop="bizOrgType">
                <el-select v-model="formxiajitype.bizOrgType" placeholder="请选择业务机构类型" size="small" style="width: 100%" @change="$forceUpdate()">
                  <el-option v-for="(item,index) in optypelist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
               </el-form-item>
             </el-col>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="elbutton" @click="quxiaoxiaji">取 消</el-button>
          <el-button class="elbutton" type="primary" @click="submitxiaji">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  gettypeselectapi, getdingtypeapi, getxiajitypeapi, getzuzhitypearrapi, getdanweifenyelistapi,
  postaddzuzhigongsiapi,postaddzuzhijigouapi,getnewzuzhitypeapi,delzhuzhijigouapi
} from '@/api/system/BusinessOrganization'
export default {
  name: 'CallPoliceIndex',

  data() {
    return {
      dialogVisibles:false,
      dialogVisible:false,
      isshow:false,
      filterinput:'',
      value: '',
      options:[],
      props: {
        label: 'bizOrgName',
        disabled: 'disabled'
      },
      treeVisible: true,
      form: {},
      zhuzutype:[],
      jigoulist: [],
      formtype:{},
      rulestype: {
        orgNo: [
        { required: true, message: '请选择组织机构编码', trigger: 'change' }
        ],
        bizType: [
        { required: true, message: '请选择业务组织类型', trigger: 'change' }
        ]
      },
      optypelist:[],
      formxiajitype: {},
      rulesxiajitype: {
        orgNo: [
        { required: true, message: '请选择行政机构', trigger: 'change' }
        ],
        bizOrgType: [
        { required: true, message: '请选择业务机构类型', trigger: 'change' }
        ]
      },
      node: {},
    };
  },
  async created() {
    //获取业务组织机构下拉
    const { data: { list } } = await gettypeselectapi({dictType:'BizType'})
    this.options = list
    this.value = list[0].value
  },
  async mounted() {
    //  获取组织机构类型下拉
    const res = await getzuzhitypearrapi({dictType:'BizOrgType'})
    this.zhuzutype = res.data.list
    // 获取组织机构分页
    const page = await getdanweifenyelistapi({ pageNo: 0, pageSize: 1000 })
    this.jigoulist = page.data.list
  },

  methods: {
    // 新增下级业务组织
    async submitxiaji(){
      await this.$refs.formxiajiref.validate()
      const {bizOrgName,...obj}=this.formxiajitype
      await postaddzuzhijigouapi(obj).then(res=>{
        if (res.code == 200) {
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
            message: res.message
          })
          this.quxiaoxiaji()
          this.node.loaded = false
          this.node.expand()
         }
      })
    },
    // 下级组织弹窗关闭
    quxiaoxiaji(){
      this.$refs.formxiajiref.resetFields();
      this.dialogVisibles=false
    },
    // 新增业务组织
    async submitzuzhitype() {
      await this.$refs.formtype.validate()
      await postaddzuzhigongsiapi(this.formtype).then(res => {
        if (res.code == 200) {
          this.$message({
            type: res.code == 200 ? 'success' : 'warning',
            message: res.message
          })
          this.treeVisible = false
          this.$nextTick(()=>{
           this.treeVisible = true
          })
          this.quxiaozuzhitype()
         }
      })
    },
    // 业务组织弹窗取消
    quxiaozuzhitype() {
      this.$refs.formtype.resetFields();
      this.dialogVisible=false
    },
    // 删除业务组织
    delzuzhi() {
      this.$confirm('此操作将永久删除该组织, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delzhuzhijigouapi({ id: this.form.id }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: res.code == 200 ? 'success' : 'warning',
                message: res.message
              })
              this.node.parent.loaded = false;
              this.node.parent.expand()
              this.isshow=false
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 业务类型下拉
    changetype() {
      this.treeVisible = false
      this.form = {}
      this.isshow=false
      this.$nextTick(()=>{
          this.treeVisible = true
        })
    },
    // 树节点点击
    async handleNodeClick(val, node) {
      console.log(node,55555555);
      this.node=node
      this.formxiajitype.bizOrgName=val.bizOrgName
      this.formxiajitype.parentId=val.id
      this.isshow = true
      this.form = { ...val }
      this.form.shangji=this.jigoulist.filter(ele=>ele.orgNo==val.bizParentNo)[0]?.orgName
      this.form.leixing=this.zhuzutype.filter(ele=>ele.value==val.bizOrgType)[0].text
      this.form.leibie=this.options.filter(ele=>ele.value==val.bizType)[0].text
    },
   // 树节点过滤
   filterNode(value, data) {
      if (!value) return true
      return data.bizOrgName.indexOf(value) !== -1
    },
    // 树组件懒加载
    async loadNode(node, resolve) {

      const res = await getdingtypeapi({ bizType: this.value ?this.value:'10'})
        if (node.level === 0) {
          // 初始的级数（最顶层）
          
          return resolve(res.data.list) // 最顶层数据渲染为region
       }
      if (node.level === 1) {
        const xiaji = await getxiajitypeapi({ parentOrgNo: node.data.bizOrgNo })
        return resolve(xiaji.data.list)
      } else if (node.level === 2) {
        const xiaji = await getxiajitypeapi({ parentOrgNo: node.data.bizOrgNo })
        return resolve(xiaji.data.list)
      } else if (node.level === 3) {
        const xiaji = await getxiajitypeapi({ parentOrgNo: node.data.bizOrgNo })
        return resolve(xiaji.data.list)
      } else if (node.level === 4) {
        const xiaji = await getxiajitypeapi({ parentOrgNo: node.data.bizOrgNo })
        return resolve(xiaji.data.list)
      }
    },
  },
  watch: {
    filterinput (val) {
      this.$refs.tree.filter(val)
    },
    async dialogVisibles(val) {
      if (val) {
        const { data: { list } } = await getnewzuzhitypeapi({ dictType: 'BizOrgType', dictValue: this.form.bizOrgType })
        this.optypelist=list
      }
    }
  }
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option{
  padding-left: 10px;
}
.elbutton{
  width: 60px;
  height: 30px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    height: 100%;
    width: 300px;
    padding:10px ;
    background-color: #fff;
    margin-right: 10px;
    .lefttitle{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text{
        font-size: 18px;
        color: #000;
        font-weight: bold;
      }
      .button{
        width: auto;
        padding: 0 10px;
        height: 32px;
      }
    }
    .typeselect{
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .treebox{
      margin-top: 10px;
      height: 85%;
      overflow-x: auto;
      overflow-y: auto;
      img{
        margin-right: 5px;
        vertical-align: middle;
      }
      span{
        font-size:14px;
        /* color: #000; */
      }
    }
  }
  .rightbox{
    height: 100%;
    width: calc(100% - 310px);
    .righttopbox{
      height: 54px;
      background-color: #fff;
      margin-bottom: 10px;
      padding: 10px;
      .button{
        width: auto;
        padding: 0 10px;
        height: 32px;
      }
    }
    .rightbuttonbox{
      height: calc(100% - 56px);
      background-color: #fff;
      padding: 10px;
    }
  }
}
::v-deep .el-col-24{
  margin-bottom: 20px;
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #bae7ff !important;
}
::v-deep .el-tree-node__content{
  &:hover{
    background-color: #f0f7ff;
  }
}
</style>